<template>
  <div id="app">
    <!-- 路由出口 -->
    <button @click="toLogin">点我跳转到登录页面</button>
    <router-view />

    <footer>
      <!-- 路由导航 -->
      <router-link to="/index" tag="b">首页</router-link>
      <router-link to="/classify" tag="b">分类</router-link>
      <router-link to="/my" tag="b">我的</router-link>
      <router-link to="/login" tag="b">登录</router-link>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
    toLogin() {
      // 可以定义路由行为
      console.log(this.$router);
      // 跳转路由-编程时路由导航
      // this.$router.push('/login')
      this.$router.push({ name: 'Login' })
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 46px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: skyblue;
}
.router-link-exact-active, .router-link-active {
  color: red
}
</style>
